<template>
  <div>
    <!-- 整体 -->
    <div class="allcontent">
      <!-- 焦点图 -->
      <div class="banner">
        <div class="banner-content">
          <img
            src="http://www.bluemoon.com.cn/_nuxt/img/cleanBanner.36f8f41.jpg"
            alt=""
          />
        </div>
      </div>
      <!-- 产品分类 -->
      <div class="layer-count">
        <div class="clean_content--2-jz4">
          <div class="clean_content_tablist--2cmRh">
            <div class="Tablist_father--1scSK">
              <div class="Tablist--W3Ai5">
                <div class="left">
                  <div><a class="color" href="#qingjie">衣物清洁护理类</a></div>
                  <div><a href="#huli">个人清洁护理类</a></div>
                  <div><a href="#jiaju">家居清洁护理类</a></div>
                </div>
                <div class="right">
                  <div class="r-l">
                    <input placeholder="输入产品信息搜索产品" type="text" />
                  </div>
                  <div class="r-r">
                    <span>搜索</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="clean_item--Nkxni">
            <div id="qingjie" class="clean_item_title--1aM3c">
              衣物清洁护理类
            </div>
            <div class="margin"></div>
            <div class="prodItem_content--1Ft3D">
              <div
                v-for="item in list1"
                :key="item.id"
                class="prodItem_content_item--2Vj7F"
              >
                <a href="#">
                  <img :src="item.src" alt="" />
                  <div>{{ item.txt }}</div>
                </a>
              </div>
            </div>
          </div>
          <div class="clean_item--Nkxni">
            <div id="huli" class="clean_item_title--1aM3c">个人清洁护理类</div>
            <div class="margin"></div>
            <div class="prodItem_content--1Ft3D">
              <div
                v-for="item in list2"
                :key="item.id"
                class="prodItem_content_item--2Vj7F"
              >
                <a href="#">
                  <img :src="item.src" alt="" />
                  <div>{{ item.txt }}</div>
                </a>
              </div>
            </div>
          </div>
          <div class="clean_item--Nkxni">
            <div id="jiaju" class="clean_item_title--1aM3c">家居清洁护理类</div>
            <div class="margin"></div>
            <div class="prodItem_content--1Ft3D">
              <div
                v-for="item in list3"
                :key="item.id"
                class="prodItem_content_item--2Vj7F"
              >
                <a href="#">
                  <img :src="item.src" alt="" />
                  <div>{{ item.txt }}</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      list1: [
        {
          id: 1,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555389310_%E8%87%B3%E5%B0%8A%E7%94%9F%E7%89%A9%E7%A7%91%E6%8A%80.png",
          txt: "至尊生物科技洗衣液",
        },
        {
          id: 2,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555432840_%E6%9E%81%E6%B4%97%E8%87%B3%E5%B0%8A.png",
          txt: "机洗至尊",
        },
        {
          id: 3,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555498906_%E9%A2%84%E6%B6%82%E7%A5%9E%E5%99%A8.png",
          txt: "预涂·手洗双用型洗衣液",
        },
        {
          id: 4,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555707583_%E4%BA%AE%E7%99%BD%E5%A2%9E%E8%89%B3.png",
          txt: "亮白增艳洗衣液",
        },
        {
          id: 5,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555733592_%E6%B7%B1%E5%B1%82%E6%B4%81%E5%87%80.png",
          txt: "深层洁净护理洗衣液",
        },
        {
          id: 6,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1627274470754_%E5%AE%98%E7%BD%91%E6%96%B0%E5%93%81%E4%B8%8A%E4%BC%A0.jpg",
          txt: "除菌去味洗衣液",
        },
        {
          id: 7,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604560410847_%E6%89%8B%E6%B4%97%E4%B8%93%E7%94%A8%E6%B4%97%E8%A1%A3.png",
          txt: "手洗专用洗衣液",
        },
        {
          id: 8,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555875804_%E6%89%8B%E6%B4%97%E4%B8%93%E7%94%A8%E6%B4%97%E8%A1%A3.png",
          txt: "手洗专用洗衣液（旅行装）",
        },
        {
          id: 9,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1623228261652_%E5%86%85%E8%A1%A3%E6%B4%97%E8%A1%A3%E6%B6%B2g.jpg",
          txt: "内衣专用洗衣液",
        },
        {
          id: 10,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1623228449779_%E5%86%85%E8%A1%A3%E6%B4%97%E8%A1%A3%E6%B6%B2%E8%BF%B7.jpg",
          txt: "内衣专用洗衣液（旅行装）",
        },
        {
          id: 11,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1607764702484_baobao.png",
          txt: "宝宝专用洗衣液",
        },
        {
          id: 12,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555904259_%E5%AE%9D%E5%AE%9D%E4%B8%93%E7%94%A8%E6%B4%97%E8%A1%A3.png",
          txt: "宝宝专用洗衣液（旅行装）",
        },
        {
          id: 13,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556037511_%E6%B5%93%E7%BC%A9%E6%9F%94%E9%A1%BA%E5%89%82.png",
          txt: "浓缩柔顺剂",
        },
        {
          id: 14,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555965006_%E7%99%BD%E8%89%B2%E8%A1%A3%E7%89%A9.png",
          txt: "白色衣物色渍净",
        },
        {
          id: 15,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555986376_%E5%BD%A9%E8%89%B2%E8%A1%A3%E7%89%A9.png",
          txt: "彩色衣物色渍净",
        },
        {
          id: 16,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556000630_%E8%A1%A3%E7%89%A9%E6%B6%88%E6%AF%92%E6%B6%B2.png",
          txt: "衣物消毒液",
        },
        {
          id: 17,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556017426_%E8%A1%A3%E9%A2%86%E5%87%80.png",
          txt: "衣领净",
        },
        {
          id: 18,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556061128_%E7%BB%BF%E8%89%B2%E6%9F%94%E9%A1%BA%E5%89%82.png",
          txt: "绿色柔顺剂",
        },
        {
          id: 19,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556171165_%E4%B8%9D%E6%AF%9B%E5%87%80.png",
          txt: "丝毛净",
        },
        {
          id: 20,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556189182_%E7%BE%BD%E7%BB%92%E6%B8%85%E6%B4%97%E6%B6%B2.png",
          txt: "羽绒服清洗液",
        },
        {
          id: 21,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1625827343241_%E5%AE%98%E7%BD%91%E6%96%B0%E5%93%81%E4%B8%8A%E4%BC%A0.jpg",
          txt: "蓝色月光色渍净",
        },
      ],
      list2: [
        {
          id: 22,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1617258458802_%E8%87%AA%E5%8A%A8%E6%B4%97%E6%89%8B%E6%9C%BA%E7%99%BD.jpg",
          txt: "自动洗手机",
        },
        {
          id: 23,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556625066_%E5%87%80%E4%BA%AB%E6%B0%A8%E5%9F%BA%E9%85%B8%E6%B4%97.png",
          txt: "净享氨基酸洗手露",
        },
        {
          id: 24,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1614158735508_%E5%85%8D%E6%B4%97.png",
          txt: "免洗抑菌洗手液",
        },
        {
          id: 25,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1609141083130_%E5%B0%BA%E5%AF%B8%E8%B0%83%E6%95%B4-%E4%BA%A7.png",
          txt: "泡沫时光厨房洗手液",
        },
        {
          id: 26,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604450848694_%E4%BA%A7%E5%93%81%E5%9B%BE%E7%89%87-0.png",
          txt: "泡沫抑菌洗手液",
        },
        {
          id: 27,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604459202219_%E6%8A%91%E8%8F%8C%E6%B4%97%E6%89%8B%E6%B6%B23.png",
          txt: "抑菌洗手液",
        },
        {
          id: 28,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604459148006_%E9%87%8E%E8%8F%8A%E8%8A%B1390.png",
          txt: "野菊花清爽洗手液",
        },
        {
          id: 29,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556645720_%E7%BB%B4e%E6%BB%8B%E6%B6%A6%E6%B4%97%E6%89%8B.png",
          txt: "维E滋润洗手液",
        },
        {
          id: 30,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1605170134781_%E5%84%BF%E7%AB%A5%E6%B4%97%E6%89%8B%E6%B6%B2.png",
          txt: "儿童洗手液",
        },
        {
          id: 31,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1614158757232_620123.png",
          txt: "果泡多多儿童泡泡洗手液",
        },
      ],
      list3: [
        {
          id: 32,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556789680_%E5%A4%A9%E9%9C%B2%E9%A4%90%E5%85%B7%E6%9E%9C%E8%94%AC.png",
          txt: "天露餐具果蔬洁净精华",
        },
        {
          id: 33,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556810727_%E6%9C%88%E4%BA%AE%E5%B0%8F%E5%B1%8B%E6%B4%97%E7%A2%97.png",
          txt: "月亮小屋洗碗网花",
        },
        {
          id: 34,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556857289_%E6%B2%B9%E6%B1%A1%E5%85%8B%E6%98%9F%E6%B3%A1%E6%B2%AB.png",
          txt: "油污克星泡沫型",
        },
        {
          id: 35,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556901489_%E5%8D%AB%E8%AF%BA%E9%99%A4%E9%9C%89.png",
          txt: "卫诺除霉去渍剂",
        },
        {
          id: 36,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1623226826044_%E5%A4%9A%E7%94%A8%E9%80%94%E9%99%A4%E8%8F%8C%E6%B6%B2.jpg",
          txt: "多用途除菌液",
        },
        {
          id: 37,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1625825887219_%E5%AE%98%E7%BD%91%E6%96%B0%E5%93%81%E4%B8%8A%E4%BC%A0.jpg",
          txt: "洗衣机清洁剂",
        },
        {
          id: 38,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604557006061_84%E6%B6%88%E6%AF%92%E6%B6%B2.png",
          txt: "84消毒液",
        },
        {
          id: 39,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1607743007069_%E5%B0%BA%E5%AF%B8%E8%B0%83%E6%95%B4.png",
          txt: "卫诺香氛洁厕液",
        },
        {
          id: 40,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556962523_%E5%8D%AB%E8%AF%BA%E6%B4%81%E5%8E%95%E5%AE%9D.png",
          txt: "卫诺洁厕宝",
        },
        {
          id: 41,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556890385_%E5%BC%BA%E5%8A%9B%E5%9E%8B%E6%B2%B9%E6%B1%A1%E5%85%8B.png",
          txt: "强力型油污克星",
        },
        {
          id: 42,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556823733_%E8%8C%B6%E6%B8%85%E5%A4%A9%E7%84%B6%E7%BB%BF%E8%8C%B6.png",
          txt: "茶清天然绿茶洗洁精",
        },
        {
          id: 43,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556871441_%E4%BF%9D%E6%8A%A4%E5%9E%8B%E6%B2%B9%E6%B1%A1%E5%85%8B.png",
          txt: "保护型油污克星",
        },
        {
          id: 44,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556980907_Q%E5%8E%95%E5%AE%9D.png",
          txt: "Q厕宝",
        },
        {
          id: 45,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1609140037315_%E5%B0%BA%E5%AF%B8%E8%B0%83%E6%95%B4.png",
          txt: "强效厕清",
        },
        {
          id: 46,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556992697_%E5%9C%B0%E6%9D%BF%E6%B8%85%E6%B4%81%E5%89%82.png",
          txt: "地板清洁剂",
        },
        {
          id: 47,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604557019367_%E6%BC%82%E7%99%BD%E6%B0%B4.png",
          txt: "漂白水",
        },
        {
          id: 48,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604557030768_%E7%8E%BB%E7%92%83%E6%B0%B4.png",
          txt: "玻璃水",
        },
        {
          id: 49,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604557046976_%E5%85%A8%E8%83%BD%E6%B0%B4.png",
          txt: "全能水",
        },
        {
          id: 50,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604557210427_%E6%B4%81%E7%93%B7%E5%AE%9D.png",
          txt: "洁瓷宝",
        },
        {
          id: 51,
          src: "https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556841774_%E6%9E%9C%E8%94%AC%E5%87%80.png",
          txt: "果蔬净",
        },
      ],
      list4: [
        {
          id: "12",
          src: "http://www.bluemoon.com.cn/_nuxt/img/icon_phone_unselect.6630446.png",
          txt: "客服热线",
        },
        {
          id: "13",
          src: "http://www.bluemoon.com.cn/_nuxt/img/icon_message_unselect.37bf2af.png",
          txt: "在线咨询",
        },
        {
          id: "14",
          src: "",
          txt: "回顶部",
        },
      ],
    };
  },
};
</script>



<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.allcontent {
  width: 100%;
  .banner {
    width: 100%;
    padding-top: 80px;
    .banner-content {
      width: 100%;
      position: relative;
      img {
        width: 100%;
      }
    }
  }
  .layer-count {
    max-width: 1420px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 80px;
    .clean_content--2-jz4 {
      padding-top: 2.5rem;
      .clean_content_tablist--2cmRh {
        width: 100%;
        background: #fff;
        z-index: 1998;
        padding-left: 200px;
        margin-left: -200px;
        .Tablist_father--1scSK {
          background: #fff;
          z-index: 1998;
          .Tablist--W3Ai5 {
            background: #fff;
            max-width: 1420px;
            margin: 0 auto;
            padding-top: 0.45rem;
            padding-bottom: 0.3rem;
            display: flex;
            justify-content: space-between;
            .left {
              width: 468px;
              border-bottom: 1px solid #f0f1f2;
              height: 33px;
              display: flex;
              justify-content: space-between;
              div {
                &:first-child {
                  border-bottom: 2px solid #1d3e97;
                }
                a {
                  padding-bottom: 0.09rem;
                  cursor: pointer;
                  font-size: 16px;
                  color: #000;
                }
                .color {
                  color: #1d3e97;
                }
              }
            }
            .right {
              display: flex;
              justify-content: flex-end;
              //   height: 44px;
              .r-l {
                padding-left: 8px;
                width: 205px;
                height: 26px;
                border-radius: 13px;
                background-color: #f1f1f1;
                input {
                  outline: none;
                  border: none;
                  box-sizing: border-box;
                  padding-left: 8px;
                  flex: 1;
                  height: 26px;
                  background-color: transparent;
                  font-size: 14px;
                  color: #333;
                }
              }
              .r-r {
                min-width: 78px;
                text-align: center;
                span {
                  font-size: 17px;
                  font-weight: 700;
                  color: #0349c3;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
      .clean_item--Nkxni {
        margin-top: 10px;
        width: 100%;
        height: auto;
        .clean_item_title--1aM3c {
          opacity: 0.5;
          font-weight: 400;
          font-size: 50px;
          color: #1d3e97;
        }
        .margin {
          margin-top: 57px;
        }
        .prodItem_content--1Ft3D {
          display: flex;
          flex-wrap: wrap;
          margin: 0 auto;
          align-items: center;
          .prodItem_content_item--2Vj7F {
            position: relative;
            justify-content: center;
            width: 22%;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #e3e3e3;
            margin-right: 4%;
            transition: all 0.5s ease-out;
            margin-bottom: 80px;
            font-size: 0;
            &:nth-child(4n) {
              margin-right: 0;
            }
            &:hover {
              transform: scale(1.05);
              box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            }
            &:hover div {
              color: #fff;
              background-color: #1d3e97;
            }
            a {
              img {
                width: 100%;
                height: 100%;
                display: inline-block;
                margin-bottom: 27%;
              }
              div {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 78%;
                padding: 6% 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22px;
                flex-wrap: wrap;
                color: #333;
                background-color: #fff;
                transition: all 0.2s ease-out;
                white-space: pre-line;
                word-wrap: break-word;
              }
            }
          }
        }
      }
    }
  }
}
</style>